<!--应聘简历-->
<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="breadcrumb-container d-flex a-items">
          <div>
            <component
                v-bind:is="item.propertyType"
                :property.sync="item"
                v-for="(item, index) in getPower"
                :key="index"
                @updateVal="updateVal"
            ></component>
          </div>
          <el-input v-model="searchForm.student_name" placeholder="姓名" size="small"
                    class="w-140 mr-10"></el-input>
          <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i
              class="el-icon-search"></i>搜索
          </el-button>
          <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
          <el-button size="small" @click="qrcideVisible=true">查看/下载幼儿接送登记入口二维码</el-button>
          <el-button size="small" @click="parentsVisible=true" plain type="primary">新增/编辑接送家长信息</el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :border="tableoption.tableBorder"
              tooltip-effect="dark">
            <el-table-column
                label="ID"
                align="center"
                prop="id"
                width="60">
            </el-table-column>
            <el-table-column
                label="创建时间"
                align="center"
                width="170"
                prop="create_time">
            </el-table-column>
            <el-table-column
                label="接送人近照"
                width="100"
                align="center">
              <template slot-scope="scope">
                <!--                <viewerModle type="1" :imgSrc="scope.row.pic"></viewerModle>-->
                <ImagePreview :src="scope.row.pic" width="40px" height="40px"></ImagePreview>
              </template>
            </el-table-column>
            <el-table-column
                label="接送人称呼"
                align="center"
                prop="relation">
            </el-table-column>
<!--            <el-table-column-->
<!--                label="接送人身份证"-->
<!--                align="center"-->
<!--                prop="identity_card">-->
<!--            </el-table-column>-->
            <el-table-column
                label="对应学生"
                align="center"
                prop="use_time">
              <template slot-scope="scope">
                <el-tag v-for="(item,index) in scope.row.student" :key="index">{{
                    item.student ? item.student.name : '-'
                  }}{{ item.student && item.student.classes ? `【${item.student.classes.class_name}】` : '' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="操作"
                width="160">
              <template slot-scope="scope">
                <el-button size="small" @click="editFn(scope.row)" plain>编辑</el-button>
                <el-button type="danger" size="small" @click="detelFn(scope.row)" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <qrcodeImg :visible.sync="qrcideVisible"></qrcodeImg>
    <parentsInfo :visible.sync="parentsVisible" @InitFn="InitFn"></parentsInfo>
    <editDetail :visible.sync="editVisible" :detailOption="detailOption" @InitFn="InitFn"></editDetail>
  </div>
</template>

<script>
import {pagination, tableoption, yeartime} from '@/utils/util.js'
import qrcodeImg from "./component/qrcodeImg";
import parentsInfo from "./component/parentsInfo";
import editDetail from "./component/editDetail";

export default {
  components: {
    qrcodeImg,
    parentsInfo,
    editDetail
  },
  data() {
    return {
      parentsVisible: false,
      qrcideVisible: false,
      editVisible: false,
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      searchForm: {
        student_name: '',
        class_id: '',
        section_id: '',
      },
      detailOption: null,
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      let option = JSON.parse(JSON.stringify(this.searchForm))
      option.p = this.page.pageindex;
      let data = await this.$fetch(this.api.classActive.pick_up.index, option);
      this.arryList = data.list.data
      this.page.total = data.list.total
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    searchFn(option) {
      if (option === 'refresh') {
        this.searchForm.student_name = ''
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    editFn(row) {
      this.detailOption = JSON.parse(JSON.stringify(row))
      this.editVisible = true
    },
    detelFn(option) {
      let self_ = this;
      this.$confirm('此接送人将永久删除，确认删除此信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self_.$post(this.api.classActive.pick_up.delete, {
          id: option.id
        }).then((response) => {
          if (response.code === 0) {
            this.InitFn()
            this.$message.success(response.msg)
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {

      })
    },
// 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    }
  },
  mounted() {
  }
}
</script>
